<!--
	@name:会员图标和文字组件
-->
<template> 
	 <view class="vip-view">
		 <image :src="typeList[endIndex].icon" mode="widthFix" class="vip-img" :style="{width:size+'rpx',height:size+'rpx',display:endIndex<1?'none':''}"></image>
		 <text class="vip-text" :style="{color:color,fontSize:fontSize,marginLeft:endIndex<1?'0':'10rpx'}">{{typeList[endIndex].name}}</text>
	</view>
</template>

<script>
	export default {
		name:"VipIcon",
		props:{
			//第几个会员
			index:{
				type:String | Number,
				default:0
			},
			//图标大小rpx
			size:{
				type:String | Number,
				default:38
			},
			//是否显示文字
			showText:{
				type:Boolean,
				default:false
			},
			//文字颜色
			color:{
				type:String,
				default:"#333"
			},
			//文字大小rpx
			fontSize:{
				type:String | Number,
				default:24
			}
		},
		data() {
			return {
				typeList:[
					{icon:'',name:'非会员'},
					{icon:'/static/images/vip-icon1.png',name:'普通会员'},
					{icon:'/static/images/vip-icon2.png',name:'黄金会员'},
					{icon:'/static/images/vip-icon3.png',name:'超级会员'}
				]
			};
		},
		computed:{
			endIndex(){
				if( this.index==1 || this.index=="会员" || this.index=="普通会员" ){
					return 1
				}else if( this.index==2 || this.index=="黄金会员" ){
					return 2
				}else if( this.index==3 || this.index=="超级会员" ){
					return 3
				}else{
					return 0
				}
			}
		},
		onLoad() {
		},
		methods:{
			click(){
				this.$emit('click');
			}
		}
	}
</script>

<style lang="scss" scoped> 
.vip-view{
	display:inline-block;
	vertical-align: middle;
	.vip-img{
		vertical-align: middle;
	}
	.vip-text{
		vertical-align: middle;
	}
}
</style>
